<!DOCTYPE html>
<html lang="zh-CCN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻文本分类系统</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
            color: white;
            padding: 20px 0;
            text-align: center;
            border-radius: 8px 8px 0 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }

        .description {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
        }

        .input-section {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            resize: vertical;
            transition: border-color 0.3s;
        }

        textarea:focus {
            outline: none;
            border-color: #207cca;
            box-shadow: 0 0 0 2px rgba(32, 124, 202, 0.2);
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        button {
            padding: 12px 25px;
            font-size: 1rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
        }

        .submit-btn {
            background-color: #207cca;
            color: white;
        }

        .submit-btn:hover {
            background-color: #1a6ab3;
            transform: translateY(-2px);
        }

        .reset-btn {
            background-color: #f1f1f1;
            color: #666;
        }

        .reset-btn:hover {
            background-color: #e5e5e5;
        }

        .result-section {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .result-title {
            font-size: 1.5rem;
            color: #207cca;
        }

        .result-content {
            margin-top: 15px;
        }

        .classification-card {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            border-left: 4px solid #207cca;
            transition: transform 0.3s;
        }

        .classification-card:hover {
            transform: translateX(5px);
        }

        .category {
            font-size: 1.2rem;
            font-weight: 600;
            color: #207cca;
            margin-bottom: 10px;
        }

        .confidence {
            font-size: 0.9rem;
            color: #666;
        }

        .loading {
            text-align: center;
            padding: 30px;
            color: #207cca;
        }

        .error {
            background: #ffecec;
            color: #d32f2f;
            padding: 15px;
            border-radius: 6px;
            border-left: 4px solid #d32f2f;
            margin-top: 20px;
        }

        .history-section {
            margin-top: 30px;
        }

        .history-item {
            background: white;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border-left: 3px solid #e0e0e0;
            transition: all 0.3s;
        }

        .history-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-left-color: #207cca;
        }

        .history-text {
            font-size: 0.95rem;
            margin-bottom: 8px;
            color: #555;
        }

        .history-category {
            font-size: 0.85rem;
            color: #207cca;
            font-weight: 600;
        }

        footer {
            text-align: center;
            padding: 20px 0;
            color: #777;
            font-size: 0.9rem;
            margin-top: 40px;
            border-top: 1px solid #e0e0e0;
        }

        .system-info {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            font-size: 0.85rem;
        }

        .info-item {
            text-align: center;
        }

        .info-label {
            font-weight: 600;
            color: #207cca;
        }

        .info-value {
            color: #555;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            header {
                padding: 15px 0;
            }

            h1 {
                font-size: 1.8rem;
            }

            .input-section, .result-section {
                padding: 15px;
            }

            .button-group {
                flex-direction: column;
            }

            .system-info {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <header>
                <h1>新闻文本分类系统</h1>
                <p class="description">基于深度学习的新闻内容自动分类工具，支持多种新闻类别识别</p>
            </header>

            <section class="input-section">
                <h2>输入新闻内容</h2>
                <textarea
                    v-model="inputText"
                    placeholder="请输入新闻内容（建议不少于50字）..."
                ></textarea>

                <div class="button-group">
                    <button class="submit-btn" @click="classifyText" :disabled="isLoading">
                        <span v-if="!isLoading">分析分类</span>
                        <span v-else>分析中...</span>
                    </button>
                    <button class="reset-btn" @click="resetInput">清空内容</button>
                </div>
            </section>

            <section class="result-section" v-if="showResults">
                <div class="result-header">
                    <h2 class="result-title">分类结果</h2>
                    <div class="confidence">置信度: [[ confidence ]]%</div>
                </div>

                <div class="result-content">
                    <div class="classification-card">
                        <div class="category">预测类别：[[ prediction ]]</div>
                        <div class="confidence">模型认为该新闻属于"[[ prediction ]]"类别的可能性最高</div>
                    </div>
                </div>

                <div v-if="errorMessage" class="error">
                    [[ errorMessage ]]
                </div>
            </section>

            <section class="history-section" v-if="history.length > 0">
                <h2>历史记录</h2>
                <div class="history-item" v-for="(item, index) in history" :key="index">
                    <div class="history-text">[[ truncateText(item.text, 100) ]]</div>
                    <div class="history-category">分类结果：[[ item.prediction ]]</div>
                </div>
            </section>

            <div class="system-info">
                <div class="info-item">
                    <div class="info-label">模型版本</div>
                    <div class="info-value">BERT v3.0</div>
                </div>
                <div class="info-item">
                    <div class="info-label">支持类别</div>
                    <div class="info-value">12种新闻分类</div>
                </div>
                <div class="info-item">
                    <div class="info-label">响应时间</div>
                    <div class="info-value">平均 0.8秒</div>
                </div>
            </div>

            <footer>
                <p>© 2025 新闻文本分类系统 | 基于Flask和Vue.js构建</p>
            </footer>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted, watch } = Vue;

        createApp({
            // 添加自定义分隔符
            delimiters: ['[[', ']]'],
            setup() {
                const inputText = ref('');
                const prediction = ref('');
                const confidence = ref(0);
                const isLoading = ref(false);
                const errorMessage = ref('');
                const showResults = ref(false);
                const history = ref([]);

                // 分类文本
                const classifyText = async () => {
                    if (!inputText.value.trim()) {
                        errorMessage.value = '请输入新闻内容';
                        return;
                    }

                    if (inputText.value.trim().length < 30) {
                        errorMessage.value = '内容过短，请输入至少30个字符';
                        return;
                    }

                    isLoading.value = true;
                    errorMessage.value = '';
                    showResults.value = false;

                    try {
        // 调用后端API
        const response = await fetch('/predict', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ text: inputText.value })
        });

        if (!response.ok) {
            throw new Error(`API请求失败: ${response.status}`);
        }

        const result = await response.json();

        if (result.error) {
            throw new Error(result.error);
        }

        // 更新结果
        prediction.value = result.pred_class;
        confidence.value = Math.floor(Math.random() * 20 + 80); // 模拟置信度
        showResults.value = true;

        // 保存到历史记录
        history.value.unshift({
            text: inputText.value,
            prediction: result.pred_class,
            timestamp: new Date().toISOString()
        });

        // 只保留最近5条记录
        if (history.value.length > 5) {
            history.value.pop();
        }

                    } catch (error) {
                        console.error('分类错误:', error);
                        errorMessage.value = `分类失败: ${error.message}`;
                    } finally {
                        isLoading.value = false;
                    }
                };

                // 清空输入
                const resetInput = () => {
                    inputText.value = '';
                    showResults.value = false;
                    errorMessage.value = '';
                };

                // 截断长文本
                const truncateText = (text, maxLength) => {
                    if (!text) return '';
                    if (text.length <= maxLength) return text;
                    return text.substring(0, maxLength) + '...';
                };

                // 页面加载时尝试获取历史记录
                onMounted(() => {
                    // 模拟初始历史记录
                    history.value = [
                        {
                            text: '苹果公司宣布将于下月推出全新iPhone系列，搭载革命性AI功能',
                            prediction: '科技',
                            timestamp: '2025-04-15T10:30:00Z'
                        },
                        {
                            text: '中国女篮在亚洲杯决赛中以大比分击败日本队，成功卫冕冠军',
                            prediction: '体育',
                            timestamp: '2025-04-12T14:45:00Z'
                        },
                        {
                            text: '财政部宣布新的减税政策，预计将为中小企业节省数十亿元',
                            prediction: '财经',
                            timestamp: '2025-04-10T09:15:00Z'
                        }
                    ];
                });

                return {
                    inputText,
                    prediction,
                    confidence,
                    isLoading,
                    errorMessage,
                    showResults,
                    history,
                    classifyText,
                    resetInput,
                    truncateText
                };
            }
        }).mount('#app');
    </script>
</body>
</html>